<template>
  <div class="cart">
    <van-notice-bar mode="closeable" color="#999999" background="#FFF5E6" left-icon="warning">向左滑动可对商品进行操作</van-notice-bar>
    <template v-if="total">
      <van-swipe-cell
     v-for="prod in cart"
      :key="prod.id"
      >

    <van-card
      :price="prod.price | money"
      :desc="prod.title"
      :title="prod.title"
      @click="$router.push({name: 'detail', params: {id: prod.id}})"
      class="goods-card"
    >
    <template #thumb>
      <van-checkbox
      :value="prod.checked"
      @click.native.stop="handleModifyChecked(prod.id)"
      ></van-checkbox>
      <div class="van-image">
        <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
      </div>
    </template>
    <template #num>
      <van-stepper :value="prod.amount" button-size="16"
      @change="handleModifyAmount(prod.id, $event)"
      @click.native.stop
       />
    </template>
    </van-card>
    <template #right>
      <van-button
      square text="删除"
      type="danger"
      class="delete-button"
      @click="handleRemoveFromCart(prod.id)"
      />
    </template>
  </van-swipe-cell>
      <van-submit-bar :price="totalCheckedMoney * 100" button-text="提交订单" @submit="$router.push('/confirm') " >
      <van-checkbox :value="allChecked" @click="modifyAllChecked({checked: !allChecked})">全选</van-checkbox>
      <van-button round type="info" size="mini" color="#808080"  @click="handleRemoveFromAllCecked" class="cartshanchu">全部删除</van-button>
    </van-submit-bar>
    </template>

  <van-empty
  v-else
  class="custom-image"
  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
  description="购物车为空，请你选购商品"
/>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    // cart() {
    //   return this.$store.getters['cart/cart']
    // },
    // total() {
    //   return this.$store.getters['cart/total']
    // },
    // allChecked() {
    //   return this.$store.getters['cart/allChecked']
    // },
    ...mapGetters('cart', ['cart', 'total', 'allChecked', 'totalCheckedMoney']),
  },
  methods: {
    ...mapMutations('cart', ['removeFromCart', 'modifyAmount', 'modifyChecked', 'modifyAllChecked']),
    // 删除
    handleRemoveFromCart(id) {
      // this.$store.commit('cart/removeFromCart', (id))
      this.removeFromCart({ id })
    },
    handleRemoveFromAllCecked() {
      // this.removeFromAllCecked()
      this.$store.commit('cart/removeFromAllCecked')
    },
    handleModifyAmount(id, value) {
    // 修改数量
      // this.$store.commit('cart/modifyAmount', { id, amount: value })
      this.modifyAmount({ id, amount: value })
    },
    // 选中状态
    handleModifyChecked(id) {
      // this.$store.commit('cart/modifyChecked', { id })
      this.modifyChecked({ id })
    },

  },
  filters: { // 过滤器，用于文本格式化
    money(val) {
      return Number(val).toFixed(2)
    },
  },
}
</script>

<style lang="less" scoped>
@white: #fff;
  .goods-card {
    margin: 0;
    background-color: @white;
    padding: 12px 6px;
  }

  .delete-button {
    height: 100%;
  }
    .van-card__thumb {
    width: 120px;
    display: flex;
    justify-content: space-between;
    .van-image {
      width: 80%;
      height: 100%;
    }
  }
  .cartshanchu{
    margin-left: 16px;
  }
</style>
